<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" size="medium">
      <el-form-item>
        <el-input v-model="queryObject.newsTitle" placeholder="标题"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="queryObject.newsWriter" placeholder="编者"/>
      </el-form-item>

      <!-- value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00" -->
      <el-form-item>
        <el-date-picker
          v-model="queryObject.gmtCreate"
          type="datetime"
          placeholder="选择创建时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      
      <el-button type="primary" size="medium" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" size="medium" @click="resetData()">清空</el-button>

      <el-button :loading="downloadLoading" type="primary" size="medium" icon="el-icon-document" @click="exportCurrent">导出当前页</el-button>
      <el-button :loading="downloadLoadingAll" type="primary" size="medium" icon="el-icon-document" @click="exportAll">导出全部</el-button>

     </el-form>

    <el-select style="margin-bottom: 35px;"
          v-model="queryObject.newsAuditStatus"
          placeholder="选择审核状态" @change="getDataByStatus" size="medium">
          <el-option
            v-for="audit in auditStatusList"
            :key="audit.id"
            :label="audit.name"
            :value="audit.id"/>
    </el-select>

    <el-button
        v-if="queryObject.newsAuditStatus == 0" 
        type="primary" 
        size="medium" 
        style="margin-bottom: 35px;margin-left:10px;"
        @click="machineAuditBatch">机器审核</el-button>
    <el-button
        v-else
        type="primary" 
        size="medium" 
        style="margin-bottom: 35px;margin-left:10px;"
        plain
        disabled>机器审核</el-button>

    <el-button
        v-if="queryObject.newsAuditStatus == 1 || queryObject.newsAuditStatus == 2 || queryObject.newsAuditStatus == 4"   
        type="primary" 
        size="medium"  
        style="margin-bottom: 35px;margin-left:10px;" 
        @click="manAuditBatch">人审通过</el-button>
    <el-button
        v-else  
        type="primary" 
        size="medium"  
        style="margin-bottom: 35px;margin-left:10px;" 
        plain
        disabled>人审通过</el-button>

    <el-button
        v-if="queryObject.newsAuditStatus == 1 || queryObject.newsAuditStatus == 2 || queryObject.newsAuditStatus == 4"   
        type="primary" 
        size="medium"  
        style="margin-bottom: 35px;margin-left:10px;" 
        @click="manAuditBatchNotPass">人审不通过</el-button>
    <el-button
        v-else  
        type="primary" 
        size="medium"  
        style="margin-bottom: 35px;margin-left:10px;" 
        plain
        disabled>人工不通过</el-button>

    <el-button
        v-if="queryObject.newsAuditStatus === 3" 
        type="success" 
        size="medium" 
        style="margin-bottom: 35px;margin-left:10px;" 
        @click="publishBatch">发布</el-button>
    <el-button
        v-else
        type="success" 
        size="medium" 
        style="margin-bottom: 35px;margin-left:10px;" 
        plain
        disabled>发布</el-button>

    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      stripe
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      style="width: 100%"
      height="450"
      :default-sort = "{prop: 'gmtCreate', order: 'descending'}"
      >

      <el-table-column type="selection" align="center" />

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="newsTitle" label="标题" />

      <el-table-column prop="newsWriter" label="编者" />

      <el-table-column prop="newsAbstract" label="摘要">
        <template slot-scope="scope">
          <span>{{scope.row.newsAbstract | ellipsis}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="newsContent" label="内容">
         <template slot-scope="scope">
          <span>{{scope.row.newsContent | ellipsis}}</span>
        </template>
      </el-table-column>  

      <el-table-column prop="newsPhoto" label="图片" />

      <el-table-column prop="newsViews" label="访问量" sortable order='descending' width="88"/>

      <el-table-column prop="newsSource" label="来源" />
      
      <el-table-column prop="newsType" label="类别">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.newsType === 0" :type="'warning'"
              disable-transitions>科技</el-tag>
            <el-tag
              v-else-if="scope.row.newsType === 1" :type="'success'"
              disable-transitions>交通</el-tag>
            <el-tag
              v-else-if="scope.row.newsType === 2" :type="'danger'"
              disable-transitions>健康</el-tag>
            <el-tag
              v-else-if="scope.row.newsType === 3" :type="'success'"
              disable-transitions>农业</el-tag>
            <el-tag
              v-else :type="'danger'"
              disable-transitions>旅游</el-tag>
          </template>
      </el-table-column>  

      <el-table-column 
        label="审核状态"
        prop="newsAuditStatus"
        sortable
        width="110">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.newsAuditStatus === 0" :type="'warning'"
              disable-transitions>未经机审</el-tag>
            <el-tag
              v-else-if="scope.row.newsAuditStatus === 1" :type="'success'"
              disable-transitions>机审通过</el-tag>
            <el-tag
              v-else-if="scope.row.newsAuditStatus === 2" :type="'danger'"
              disable-transitions>机审不过</el-tag>
            <el-tag
              v-else-if="scope.row.newsAuditStatus === 3" :type="'success'"
              disable-transitions>人审通过</el-tag>
            <el-tag
              v-else :type="'danger'"
              disable-transitions>人审不过</el-tag>
          </template>
        </el-table-column>

      <el-table-column prop="newsPublishStatus" label="发布状态" width="80">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.newsPublishStatus === 0" :type="'warning'"
              disable-transitions>未发布</el-tag>
            <el-tag
              v-else :type="'success'"
              disable-transitions>已发布</el-tag>
          </template>
      </el-table-column>  

      <!--:formatter="formatDate" -->
      <el-table-column 
        label="添加时间" 
        width="120">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 2px">{{ scope.row.gmtCreate }}</span>
      </template>
      </el-table-column>

      <el-table-column 
        label="操作" 
        width="100" 
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button
              v-if="scope.row.newsAuditStatus === 1 || scope.row.newsAuditStatus === 2 || scope.row.newsAuditStatus === 3 || scope.row.newsAuditStatus === 4" 
              type="success"
              size="mini" 
              icon="el-icon-check"
              @click="goAuditDetailPage(scope.row.id)">人审</el-button>
            <el-button
              v-else
              type="info"
              size="mini"
              plain
              disabled
              icon="el-icon-check">人审</el-button>
          </div>    
            <el-button
              v-if="scope.row.newsAuditStatus === 0" 
              type="primary"
              size="mini" 
              icon="el-icon-edit"
              style="margin-top:5px"
              @click="machineAuditOne(scope.row)">机审</el-button>
            <el-button
              v-else
              type="info"
              size="mini"
              plain
              disabled
              icon="el-icon-edit"
              style="margin-top:5px">机审</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>
<script>
// 引入调用tech.js文件
import Tech from '@/api/tech/tech'

export default {
  // 设置显示过滤器
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    }
  },
  data() { // 定义变量和初始值
    return {
      list: [], // 查询之后接口返回集合
      auditStatusList:[ //0 未审核 1 预审核通过 2 预审核未通过 3 人工审核通过 4 人工审核未通过
        {
          id:0,
          name: '未经机审'
        },
        {
          id:1,
          name: '机审通过'
        },
        {
          id:2,
          name: '机审不过'
        },
        {
          id:3,
          name: '人审通过'
        },
         {
          id:4,
          name: '人审不过'
        }
      ],
      listLoading: false,
      multipleSelection: [],
      downloadLoading: false, // 导出当前页数据icon效果
      downloadLoadingAll: false, // 导出全部数据icon效果
      machineAuditStatusBtn: false, // 机器审核按钮
      manAuditStatusBtn: false, // 人工审核按钮
      publishStatusBtn: false, // 发布按钮
      page: 1, // 当前页
      limit: 10, // 每页记录数
      total: 0, // 总记录数
      queryObject: {} // 条件封装对象
    }
  },
  created() { // 页面渲染之前执行，一般调用methods定义的方法
    this.getList()
  },
  methods: {
    // 分页查询
    getList(page = 1) {
      console.log("this.queryObject:"+ JSON.stringify(this.queryObject))
      this.listLoading = true
      this.page = page
      Tech.getListByPage(this.page, this.limit, this.queryObject)
        .then(response => { // 请求成功
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
    },
    resetData() { // 清空的方法
      this.queryObject = {}
      this.getList()
    },
    // 下拉框值发生变化时调用
    getDataByStatus(val){
       // val : 0,1,2,3,4
       if(val == 0){ // 未审核，显示机器审核按钮
          this.machineAuditStatusBtn = true
          this.manAuditStatusBtn = false
          this.publishStatusBtn = false
       }else if(val ==1 || val == 2 || val == 4){ // 预审核未通过|已通过|人工审核未通过，显示人工审核按钮
          this.machineAuditStatusBtn = false
          this.manAuditStatusBtn = true
          this.publishStatusBtn = false
       }else if(val == 3){ // 人工审核通过，显示发布按钮
          this.publishStatusBtn = true
          this.machineAuditStatusBtn = false
          this.manAuditStatusBtn = false
       }else{
          this.machineAuditStatusBtn = false
          this.manAuditStatusBtn = false
          this.publishStatusBtn = false
       }
       // 调用查询接口
       this.getList() 
    },

    // 机器审核单条
    machineAuditOne(tech){
        this.listLoading = true
        Tech.machineAuditOne(tech)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
    },

    // 机器批量审核
    machineAuditBatch(){
      if (this.multipleSelection.length) {
         this.listLoading = true
        Tech.machineAuditBatch(this.multipleSelection)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
             this.listLoading = false
        })
      } else {
        this.$message({
          message: '请至少选择一条数据进行审核',
          type: 'warning'
        })
      }
    },

    // 人工单条审核
    manAuditOne(tech){
        this.listLoading = true
        Tech.updateOne(tech)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
    },

    // 人工批量审核通过
    manAuditBatch(){
     if (this.multipleSelection.length) {
       this.listLoading = true
        Tech.updateBatch(this.multipleSelection)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
      } else {
        this.$message({
          message: '请至少选择一条数据进行审核',
          type: 'warning'
        })
      }
    },

    // 人工批量审核不通过
    manAuditBatchNotPass(){
     if (this.multipleSelection.length) {
       this.listLoading = true
        Tech.updateBatchNotPass(this.multipleSelection)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
      } else {
        this.$message({
          message: '请至少选择一条数据进行审核',
          type: 'warning'
        })
      }
    },

    // 单条发布
    publishOne(tech){
        this.listLoading = true
        Tech.publishOne(tech)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
    },

    // 批量发布
    publishBatch(){
      if (this.multipleSelection.length) {
        this.listLoading = true
        Tech.publishBatch(this.multipleSelection)
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 重新加载数据
              this.getList()  
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
            this.listLoading = false
        })
      } else {
        this.$message({
          message: '请至少选择一条数据进行发布',
          type: 'warning'
        })
      }
    },
    // 调转到人工审核详情页面
    goAuditDetailPage(id){
      this.$router.push({ path: '/techIndustry/tech/detail/' + id })
    },
    
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 导出当前页面的数据
    exportCurrent() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['标题', '编者', '摘要', '内容', '图片','访问量','来源','类型','审核状态','发布状态','创建时间']
        const filterVal = ['newsTitle', 'newsWriter', 'newsAbstract', 'newsContent', 'newsPhoto','newsViews','newsSource','newsType','newsAuditStatus','newsPublishStatus','gmtCreate']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "tech-page-data"
        })
        this.$refs.multipleTable.clearSelection()
        this.downloadLoading = false
      })
    },
    // 导出所有的数据
    exportAll(){
      this.downloadLoadingAll = true
      Tech.getAll()
        .then(response => { // 请求成功
          if(response.success){
            this.$message({
                type: 'success',
                message: response.message
              })
              // 导出数据
              import('@/vendor/Export2Excel').then(excel => {
                const tHeader = ['标题', '编者', '摘要', '内容', '图片','访问量','来源','类型','审核状态','发布状态','创建时间']
                const filterVal = ['newsTitle', 'newsWriter', 'newsAbstract', 'newsContent', 'newsPhoto','newsViews','newsSource','newsType','newsAuditStatus','newsPublishStatus','gmtCreate']
                const list = response.data.list
                const data = this.formatJson(filterVal, list)
                excel.export_json_to_excel({
                  header: tHeader,
                  data,
                  filename: "tech-all-data"
                })
                this.$refs.multipleTable.clearSelection()
                this.downloadLoadingAll = false
              })
            }else{
              this.$message({
                type: 'error',
                message: response.message
              })
            }
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>
